<!-- 注册 -->
<template>
  <view>
    <!-- <aster-back />
    <view class="register">
      <view class="register-header">
        <text>注册账号</text>
      </view>
      <view>
        <view class="account">
          <uni-easyinput
            prefixIcon="phone"
            v-model="username"
            placeholder="请输入手机号"
            placeholderStyle="font-size:14px;"
            :inputBorder="false"
          />
        </view>
        <view class="password">
          <uni-easyinput
            prefixIcon="locked"
            v-model="password"
            :maxlength="20"
            placeholder="请输入密码"
            placeholderStyle="font-size:14px;"
            type="password"
            :inputBorder="false"
            :styles="{ color: '#333' }"
          />
        </view>
        <view class="password">
          <uni-easyinput
            prefixIcon="compose"
            v-model="smscode"
            placeholder="请输入验证码"
            placeholderStyle="font-size:14px;"
            type="number"
            :maxlength="6"
            :inputBorder="false"
            :styles="{ color: '#333' }"
          />
          <button v-show="!showTime" @click="getSmsCode()">获取验证码</button>
          <button v-show="showTime">{{ time }} s</button>
        </view>
      </view>
      <view class="ua_xy" :class="[{ ua_xyhover: isRead }]">
        <view class="ck" @click="changeXy()">
          <view class="ckin" />
        </view>
        <text @click="changeXy()">我已阅读并同意</text>
        <navigator :url="config.route.register_agreement" class="bn">《注册协议》</navigator>
      </view>
      <view v-if="showTip" class="tooltip"> 请勾选协议 </view>
      <view class="submit">
        <button @click="submit()">注册</button>
      </view>
    </view> -->
  </view>
</template>
<script setup lang="ts">
  // import { onBeforeUnmount, reactive, ref } from 'vue';
  // import AsterBack from '@/components/common/aster-back.vue';
  // import { onLoad } from '@dcloudio/uni-app';
  // import { sendCode, register } from '@/api/sys/user/login';
  // import { LoginParamModel } from '@/api/model/loginModel';
  // import { isEmpty } from '@/utils/is';
  // import { Toast } from '@/utils/uniapi/prompt';
  // import { router } from '@/utils/router';
  // import { encryptByMd5 } from '@/utils/cipher';
  // import config from '@/utils/config';
  // import { ResultEnum } from '@/enums/httpEnum';
  // /** 用户名 */
  // const username = ref<string>('');
  // /** 密码 */
  // const password = ref<string>('');
  // /** 验证码 */
  // const smscode = ref<string>('');
  // /** 显示验证码倒计时 */
  // const showTime = ref<boolean>(false);
  // /** 验证码倒计时 */
  // const time = ref<number>(60);
  // /** 是否已读协议 */
  // const isRead = ref<boolean>(false);
  // /** 协议未读提示 */
  // const showTip = ref<boolean>(false);
  // const timer = ref();
  // /** 待提交参数 */
  // const queryParams = reactive<LoginParamModel>({
  //   username: username.value,
  //   password: password.value,
  //   smscode: smscode.value,
  // });

  // /** 获取验证码 */
  // const getSmsCode = () => {
  //   if (isEmpty(username.value)) {
  //     Toast('请输入手机号');
  //     return;
  //   }
  //   sendCode(username.value).then(({ data }) => {
  //     if (data.code == ResultEnum.SUCCESS) {
  //       showTime.value = true;
  //       setIntervalFun();
  //     } else {
  //       Toast(data.msg);
  //     }
  //   });
  // };

  // /** 协议 */
  // const changeXy = () => {
  //   isRead.value = !isRead.value;
  //   if (isRead.value) {
  //     showTip.value = false;
  //   }
  // };

  // /** 注册 */
  // const submit = () => {
  //   if (!isRead.value) {
  //     showTip.value = true;
  //     return;
  //   }
  //   let validate = validateForm();
  //   if (!validate) return;
  //   // 密码加密
  //   queryParams.password = encryptByMd5(password.value);
  //   register(queryParams).then(({ data }) => {
  //     if (data.code == ResultEnum.SUCCESS) {
  //       Toast('注册成功！即将跳转之登录页');
  //       timer.value = setInterval(() => {
  //         router.back();
  //       }, 1500);
  //     } else {
  //       Toast(data.msg);
  //     }
  //   });
  // };
  // /** 表单校验 */
  // const validateForm = () => {
  //   if (isEmpty(username.value)) {
  //     Toast('请输入手机号');
  //     return false;
  //   }
  //   if (isEmpty(password.value)) {
  //     Toast('请输入密码');
  //     return false;
  //   }
  //   if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,20}$/.test(password.value)) {
  //     Toast('密码必须包含字母和数字，且在6-20位之间', { duration: 2500 });
  //     return false;
  //   }
  //   if (isEmpty(smscode.value)) {
  //     Toast('请输入验证码');
  //     return false;
  //   }
  //   return true;
  // };

  // /** 添加定时器 */
  // const setIntervalFun = () => {
  //   let interval = setInterval(function () {
  //     time.value--;
  //     uni.setStorage({
  //       key: 'register_time',
  //       data: {
  //         time: time.value,
  //         date: new Date().getTime(),
  //       },
  //       success: function () {},
  //     });
  //     if (time.value <= 0) {
  //       clearInterval(interval);
  //       showTime.value = false;
  //       time.value = 60;
  //     }
  //   }, 1000);
  // };

  // onLoad(() => {
  //   console.log('page is load');
  //   uni.getStorage({
  //     key: 'register_time',
  //     success: function (res) {
  //       let difDate = (new Date().getTime() - res.data.date) / 1000;
  //       if (res.data.time - Math.round(difDate) > 0) {
  //         time.value = res.data.time - Math.round(difDate);
  //         showTime.value = true;
  //         setIntervalFun();
  //       } else {
  //         showTime.value = false;
  //         time.value = 60;
  //         uni.setStorage({
  //           key: 'register_time',
  //           data: {
  //             time: 0,
  //             date: new Date().getTime(),
  //           },
  //           success: function () {},
  //         });
  //       }
  //     },
  //     complete: (res) => {
  //       console.log(res, 'loadcomplete');
  //     },
  //   });
  // });
  // /** 页面销毁前清除定时器 */
  // onBeforeUnmount(() => {
  //   clearInterval(timer.value);
  // });
</script>
<style lang="scss" scoped>
  page {
    background-color: #fff !important;
  }

  .register {
    color: #333;
    padding: 0 66rpx 0;
    position: relative;
    height: 100vh;
  }

  .register-header {
    width: 100%;
    margin-top: 60rpx;

    text {
      display: flex;
      justify-content: center;
      font-size: 40rpx;
      padding: 60rpx 0;
    }
  }

  .account {
    margin: 20rpx 0;
    border-bottom: 1px solid #bbb;
  }

  .password {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #bbb;
    margin: 20rpx 0;

    input {
      font-size: 32rpx;
    }

    button {
      width: 180rpx;
      color: #fff;
      display: inline-block;
      font-size: 28rpx;
      background-color: #ff6a6c;
      padding-left: 20rpx;
      padding-right: 20rpx;
    }
  }

  ::v-deep .uni-easyinput__content {
    background-color: unset !important;
  }

  .ua_xy {
    padding: 0 0 0 70rpx;
    line-height: 60rpx;
    position: relative;
    font-size: 24rpx;
  }
  .ua_xy .ck {
    width: 30rpx;
    height: 30rpx;
    border-radius: 100%;
    border: 1px solid #bbb;
    position: absolute;
    left: 20rpx;
    top: 14rpx;
  }
  .ua_xy .ckin {
    width: 24rpx;
    height: 24rpx;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #00da9d;
    display: none;
  }
  .ua_xyhover .ckin {
    display: block;
  }
  .ua_xy .bn {
    display: inline-block;
    color: #00da9d;
    font-size: 26rpx;
    line-height: 56rpx;
  }

  .tooltip {
    display: inline-block;
    position: relative;
    z-index: 1;
    left: 0;
    background-color: #333;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    text-align: left;
    line-height: 16px;
    padding: 12px;
  }

  .submit {
    margin: 20rpx 0;

    button {
      background-color: #ff6a6c;
      color: #fff;
      font-size: 32rpx;
    }
  }

  .divider {
    margin-top: 200rpx;
  }

  .other {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    .item {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      color: #a5a5a5;
      padding: 0 20rpx;

      image {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
      }
    }
  }
</style>
